<template>
  <div>
    <el-drawer
      ref="drawerRef"
      :title="param.id ? '编辑私教课' : '新增私教课'"
      :visible.sync="isShowDrawer"
      :before-close="closeDrawer"
      size="900px"
    >
      <el-form
        ref="ruleForm"
        class="doumee-form"
        :model="param"
        :rules="rules"
        label-width="120px"
        label-suffix="："
      >
        <div class="property-title">课程信息</div>
        <el-form-item label="课程图片" prop="courseFullImg">
          <transition name="fade">
            <Cropper
              v-if="dialogCropperVisible"
              :option-img="optionImg"
              :fileinfo="fileinfo"
              use-type="COURSE_IMG"
              :fixed-number="[750, 422]"
              @formSubmit="cropperSubmit"
              @formClose="cropperClose"
            />
          </transition>
          <div class="df_ac">
            <el-upload
              class="device-uploader"
              :action="uploadFileUrl"
              :data="uploadData"
              :auto-upload="false"
              :show-file-list="false"
              accept=".jpg,.png"
              :on-change="addFileChange"
            >
              <i class="el-icon-plus uploader-icon" />
              <div
                v-show="param.courseFullImg"
                class="file"
                :style="'background-image: url(' + param.courseFullImg + ')'"
              >
                <div class="delete">
                  <i
                    class="el-icon-delete icon"
                    @click.stop="deleteDeviceConfigAddImage"
                  />
                </div>
              </div>
            </el-upload>
            <div class="placeholder9">
              <div>建议尺寸：{{ "750px X 422px" }}</div>
              <div>
                支持png、jpg、jpeg格式，大小不超过2M，上传图片不允许涉及政治敏感与色情
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="课程名称" prop="courseName">
          <el-input
            v-model="param.courseName"
            type="text"
            class="w400"
            placeholder="请输入课程名称"
            maxlength="20"
          />
        </el-form-item>
        <el-form-item
          label="课程模式"
          :prop="coursePatternFlag == '1' ? 'numLow' : ''"
        >
          <el-radio
            v-model="coursePatternFlag"
            :disabled="Boolean(param.id) && param.status != '1'"
            label="0"
          >一对一</el-radio>
          <el-radio
            v-model="coursePatternFlag"
            :disabled="Boolean(param.id) && param.status != '1'"
            label="1"
          >一对多</el-radio>
          <el-input
            v-if="coursePatternFlag == '1'"
            v-model="param.numLow"
            :disabled="Boolean(param.id) && param.status != '1'"
            oninput="value=value.replace(/^(0+)|[^\d]+/g, '').slice(0, 5)"
            class="w100 mr10"
            placeholder="人数下限"
          />
          <span v-if="coursePatternFlag == '1'"> - </span>
          <el-input
            v-if="coursePatternFlag == '1'"
            v-model="param.numUp"
            :disabled="Boolean(param.id) && param.status != '1'"
            oninput="value=value.replace(/^(0+)|[^\d]+/g, '').slice(0, 5)"
            class="w100"
            placeholder="人数上限"
          />
        </el-form-item>
        <el-form-item label="授课教练">
          <el-radio
            v-model="courseCoachFlag"
            label="1"
            @change="CoachChange"
          >全部教练</el-radio>
          <el-radio
            v-model="courseCoachFlag"
            label="0"
            @change="CoachChange"
          >指定教练</el-radio>
          <template v-if="courseCoachFlag == '0'">
            <span class="placeholder9">已选</span>
            <span
              class="primaryColor underline pointer"
              @click="isShowCoach = true"
            >{{ selectedCoach.length }}位</span>
            <span class="placeholder9">教练</span>
          </template>
        </el-form-item>
        <el-form-item label="上课地点" prop="site">
          <el-input
            v-model="param.site"
            type="text"
            class="w400"
            placeholder="请输入上课地点"
            maxlength="20"
          />
        </el-form-item>
        <el-form-item label="课时时长" prop="duration">
          <el-input
            v-model="param.duration"
            type="text"
            :disabled="Boolean(param.id) && param.status != '1'"
            class="w400"
            placeholder="请输入课程时长(分钟)"
            oninput="value=value.replace(/^(0+)|[^\d]+/g, '').slice(0, 5)"
            maxlength="20"
          />
        </el-form-item>
        <el-form-item label="课程介绍" prop="info">
          <div class="secondColor">
            注：图片不支持复制粘贴，仅支持本地上传；
          </div>
          <quill-editor
            ref="myTextEditor"
            v-model="param.info"
            placeholder="请输入课程介绍"
            class="myQuillEditor"
            :options="quillOption"
          />
        </el-form-item>

        <div class="line-style" />
        <div class="property-title">售卖信息</div>
        <el-form-item label="教练定价" prop="teacherLevelList">
          <div class="secondColor">
            考虑到教练等级会随时发生变化，因此需要对全部等级进行定价；
          </div>
          <div class="leavl">
            <div class="item header">
              <div class="label">教练等级</div>
              <div class="value">课时价格(元)</div>
            </div>
            <div
              v-for="item in param.teacherLevelList"
              :key="item.id"
              class="item"
            >
              <div class="label">{{ item.levelName }}</div>
              <div class="value">
                <el-input
                  v-model="item.price"
                  :disabled="
                    item.disabled && Boolean(param.id) && param.status != '1'
                  "
                  placeholder="请输入价格"
                  oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
                />
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="售卖渠道" prop="channel">
          <el-checkbox-group v-model="param.channel">
            <el-checkbox label="01">小程序端</el-checkbox>
            <el-checkbox label="02">场馆PC端</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="预约方式" prop="payTypes">
          <el-checkbox-group v-model="param.payTypes">
            <el-checkbox label="01">课程卡预约</el-checkbox>
            <el-checkbox label="02">单次预约</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="折扣类型" prop="discountType">
          <el-select
            v-model="param.discountType"
            :disabled="Boolean(param.id) && param.status != '1'"
            placeholder="请选择折扣类型"
            class="w400"
          >
            <el-option
              v-for="item in zkList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <div
          v-if="param.discountType == '1'"
          style="display: flex; flex-wrap: wrap"
        >
          <el-form-item
            v-for="vip in vipType"
            :key="vip.id"
            align="center"
            :label="vip.cardName || vip.name"
            style="width: 50%"
            :prop="`discountMap.${vip.id}`"
            :rules="{
              required: true,
              message: '请输入会员折扣',
              trigger: 'blur',
            }"
          >
            <el-input
              v-model="param.discountMap[vip.id]"
              onkeyup="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')"
              oninput="if(value<0||value>1) { value = ''} else {value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')}"
              type="text"
              :disabled="
                Boolean(param.id) && vip.disabled && param.status != '1'
              "
              placeholder="请输入会员折扣(保留两位小数)"
              maxlength="20"
            />
          </el-form-item>
        </div>

        <div class="line-style" />
        <div class="property-title">其他信息</div>
        <el-form-item label="排序码" prop="sortNum">
          <el-input
            v-model="param.sortNum"
            oninput="value=value.replace(/^(0+)|[^\d]+/g, '').slice(0, 5)"
            maxlength="11"
            class="w400"
            placeholder="请输入排序码"
          />
        </el-form-item>
        <el-form-item label="视频号">
          <el-button
            type="primary"
            @click="openChanne"
          ><span class="df_ac"><i class="el-icon-link fs_18" />{{ param.videoId && param.videoNumberId ? '已关联' : '关联微信视频号视频' }}</span></el-button>
          <span
            class="placeholder9 ml10"
          >设置视频号视频后，小程序课程详情页面背景图将打开对应视频</span>
        </el-form-item>
        <el-form-item label="是否热门课程" prop="isHot">
          <el-switch
            v-model="param.isHot"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            v-preventReClick
            :loading="subLoading"
            type="primary"
            @click="onSubmit()"
          >提交</el-button>
          <el-button v-preventReClick @click="cancelSub">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-dialog title="选择教练" :visible.sync="isShowCoach" width="900px">
      <el-transfer
        v-model="selectedCoach"
        filterable
        filter-placeholder="搜索"
        class="transfer-class"
        :titles="['全部教练', '已选教练']"
        :data="jlList"
        :props="{
          key: 'teacherId',
          label: 'label',
        }"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="subCoachSel(false)">取 消</el-button>
        <el-button type="primary" @click="subCoachSel(true)">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="关联视频号"
      :visible.sync="isShowChannel"
      width="800px"
    >
      <div class="warnningTip">
        注：视频号ID与视频ID都填写正确后，小程序才能打开视频号视频；使用H5版本时无法跳转，请不要配置；
      </div>
      <el-form
        ref="channelRef"
        class="doumee-form"
        :model="param"
        :rules="rules"
        label-width="120px"
        label-suffix="："
      >
        <el-form-item label="视频号ID" prop="videoNumberIdTemp">
          <el-input
            v-model="param.videoNumberIdTemp"
            style="width: 400px"
            placeholder="请输入视频号ID"
          />
        </el-form-item>
        <el-form-item>
          <div class="placeholder9">
            <span>如何获取视频号ID：登录</span>
            <a
              href="https://channels.weixin.qq.com/"
              target="_blank"
              class="primaryColor underline"
            >视频号助手</a>
            <span>，在「首页」中复制视频号ID</span>
          </div>
          <div>
            <el-image
              class="w400"
              :preview-src-list="[
                'https://axure-file.lanhuapp.com/md5__6d903ccf499fd6042fd1a332091bdbfd.png',
              ]"
              src="https://axure-file.lanhuapp.com/md5__6d903ccf499fd6042fd1a332091bdbfd.png"
            />
          </div>
        </el-form-item>
        <el-form-item label="视频ID" prop="videoIdTemp">
          <el-input
            v-model="param.videoIdTemp"
            style="width: 400px"
            placeholder="请输入视频ID"
          />
        </el-form-item>
        <el-form-item>
          <div class="placeholder9">
            <span>如何获取视频ID：登录</span>
            <a
              href="https://channels.weixin.qq.com/"
              target="_blank"
              class="primaryColor underline"
            >视频号助手</a>
            <span>，在「动态管理」中复制视频ID</span>
          </div>
          <div>
            <el-image
              class="w400"
              :preview-src-list="[
                'https://axure-file.lanhuapp.com/md5__fe942d7dc67e783dd04aeb849577af58.png',
              ]"
              src="https://axure-file.lanhuapp.com/md5__fe942d7dc67e783dd04aeb849577af58.png"
            />
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeChanne">取 消</el-button>
        <el-button type="primary" @click="subChanne">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { uploadFile, addOrUpdateIndividualLesson, cardList, teacherList, infoCourse, teacherLevelListPost } from '@/api'
import { quillEditor } from 'vue-quill-editor'
import quillConfig from '@/api/sc.js'
import Cropper from '@/components/cropper'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    quillEditor,
    Cropper
  },
  data() {
    var validateLeval = (rule, value, callback) => {
      var count = 0
      value.forEach(item => {
        if (!item.price || item.price === '') {
          count++
        }
      })

      if (count > 0) {
        callback(new Error('教练定价必填'))
      } else {
        callback()
      }
    }
    var newRule = (rule, value, callback) => {
      console.log(value[0], 7, value[1])
      if (value[0] === undefined && value[1] === undefined) {
        callback(new Error(rule.message || '请输入课程人数范围'))
      } else if (!/^\+?[1-9][0-9]*$/.test(value[0]) || !/^\+?[1-9][0-9]*$/.test(value[1])) {
        callback(new Error(rule.message || '请输入正确人数'))
      } else if (value[0] < 1) {
        callback(new Error(rule.message || '请输入正确人数范围'))
      } else if (Number(value[0]) > Number(value[1])) {
        callback(new Error(rule.message || '请输入正确人数范围'))
      } else {
        callback()
      }
    }
    return {
      isShowChannel: false,
      isShowDrawer: false,
      courseNumFlag: '1',
      isShowCoach: false,
      courseCoachFlag: '1',
      coursePatternFlag: '0',

      subLoading: false,
      dialogCropperVisible: false,
      optionImg: '',
      files: {},
      fileinfo: {},
      uploadFileUrl: uploadFile,
      uploadData: {
        folder: 'COURSE_IMG',
        type: ''
      },
      zkList: [
        { value: '0', label: '默认折扣' },
        { value: '1', label: '自定义折扣' }
      ],
      jlList: [],
      selectedCoach: [],
      vipType: [],
      venueId: sessionStorage.getItem('venueId'),
      param: {
        discountMap: {},
        channel: ['02'],
        numLow: 1,
        payTypes: [],
        teacherLevelList: [],
        discountType: '0'
      },
      rules: {
        courseFullImg: [{ required: true, message: '请上传课程图片', trigger: 'change' }],
        courseName: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
        courseType: [{ required: true, message: '请选择课程类型', trigger: 'change' }],
        numLow: [{ required: true, message: '请输入', trigger: 'blue' }],
        teacherId: [{ required: true, message: '请选择授课教练', trigger: 'change' }],
        itemsIds: [{ required: true, message: '请选择课程类目', trigger: 'change' }],
        price: [{ pattern: /^(([0-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/, required: true, message: '请输入正确课时总价(元),最多保留2位小数', trigger: 'blur' }],
        classNum: [{ pattern: /^\+?[1-9][0-9]*$/, required: true, message: '请输入正确课时数', trigger: 'blur' }],
        rs: [{ required: true, validator: newRule, trigger: 'change' }],
        site: [{ required: true, message: '请输入上课地点', trigger: 'blur' }],
        duration: [{ required: true, message: '请输入课程时长', trigger: 'blur' }],
        info: [{ required: true, message: '请输入课程简介', trigger: 'blur' }],
        des: [{ required: true, message: '请输入课程详情', trigger: 'blur' }],
        videoNumberIdTemp: [{ required: true, message: '请输入', trigger: 'blur' }],
        videoIdTemp: [{ required: true, message: '请输入', trigger: 'blur' }],
        discountType: [{ required: true, message: '请选择折扣类型', trigger: 'change' }],
        payTypes: [{ required: true, message: '请选择预约方式', trigger: 'change' }],
        channel: [{ required: true, message: '请选择售卖渠道', trigger: 'change' }],
        teacherLevelList: [{ validator: validateLeval, trigger: 'change', required: true, message: '请输入教练定价' }]
      },
      content: '',
      quillOption: quillConfig,
      courseId: ''
    }
  },
  mounted() {
    // if (this.$route.query.courseId) {
    //   this.courseId = this.$route.query.courseId
    //   this.getDetail()
    // } else {
    //   this.getCardList()
    // }
    this.getTeachList()
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.param.price = Number(this.param.price)
          this.param.venueId = this.venueId
          const param = { ...this.param }
          param.classNum = Number(param.classNum)
          param.flag = '2'
          param.payType = this.param.payTypes.join(',')
          param.channel = this.param.channel.join(',')
          param.courseType = '4'
          if (this.selectedCoach.length > 0) {
            if (this.courseCoachFlag === '0') {
              param.teacherId = this.selectedCoach.join(',')
            } else {
              param.teacherId = ''
            }
          } else {
            param.teacherId = ''
          }
          if (this.coursePatternFlag === '0') {
            param.numUp = '1'
          } else {
            param.numUp = this.param.numUp
          }
          param.venueId = sessionStorage.getItem('venueId')
          param.teacherPrice = this.param.teacherLevelList.map(item => {
            const obj = {}
            obj.price = item.price
            obj.teacherLevelId = item.id
            return obj
          })

          this.subLoading = true
          addOrUpdateIndividualLesson({
            param
          })
            .then(res => {
              this.subLoading = false
              if (res.errorCode === '000000') {
                this.$message.success('提交成功')
                this.isShowDrawer = false
                this.$emit('success')
              }
            })
            .catch(err => {
              this.subLoading = false
              console.log(err)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    initParam(row) {
      const fn = () => {
        if (row.teacherId) {
          this.selectedCoach = row.teacherId.split(',')
          this.courseCoachFlag = '0'
        } else {
          this.selectedCoach = []
          this.courseCoachFlag = '1'
        }
        if (this.param.teacherLevelList) {
          this.param.teacherLevelList.forEach(item => {
            row.coursePrice.forEach(item2 => {
              if (item.id === item2.teacherLevelId) {
                item.price = item2.price
                item.disabled = true
              }
            })
          })
        }
        if (row.channel) {
          this.$set(this.param, 'channel', row.channel.split(','))
        } else {
          this.param.channel = ['02']
        }
        if (row.payType) {
          this.$set(this.param, 'payTypes', row.payType.split(','))
        } else {
          this.param.payTypes = []
        }
        this.coursePatternFlag = row.numUp > 1 ? '1' : '0'
        if (row.discountType === '0') {
          this.$set(this.param, 'discountMap', {})
          this.getCardList()
        } else {
          const discountMap = JSON.parse(JSON.stringify(row.disCountMap)) || {}
          this.$set(this.param, 'discountMap', discountMap)
          const arrs = []
          cardList({})
            .then((res) => {
              if (res.errorCode === '000000') {
                const vip = res.recordList
                vip.forEach(item => {
                  arrs.push({
                    name: item.cardName,
                    id: item.id,
                    value: discountMap[item.id],
                    disabled: !!discountMap[item.id]
                  })
                })
                this.vipType = arrs
              }
            })
            .catch((err) => {
              console.log(err)
            })
        }
      }
      fn()
    },
    CoachChange() {
      if (this.courseCoachFlag === '0') {
        this.isShowCoach = true
      } else {
        // this.selectedCoach = []
      }
    },
    subCoachSel(falg) {
      if (!falg) {
        this.selectedCoach = []
      }
      console.log(this.selectedCoach)
      this.isShowCoach = false
    },

    getDetail(id) {
      // 获取卡类型列表
      infoCourse({ param: { courseId: id }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          const obj = res.record
          this.param = {
            ...obj,
            flag: '2',
            itemsIds: obj.courseItemIds,
            beginDate: obj.beginDate ?? '',
            courseFullImg: obj.courseImgUrl,
            rs: [obj.peopleNumLow, obj.peopleNumUp]
          }
          if (res.record.discountType === '0') {
            this.$set(this.param, 'discountMap', {})
            this.getCardList()
          } else {
            const discountMap = obj.discountMap
            this.$set(this.param, 'discountMap', obj.discountMap)
            const arrs = []
            cardList({})
              .then((res) => {
                if (res.errorCode === '000000') {
                  const vip = res.recordList
                  vip.forEach(e => {
                    if (Object.prototype.hasOwnProperty.call(discountMap, e.id)) {
                      arrs.push(e)
                    }
                  })
                  this.vipType = arrs
                }
              })
              .catch((err) => {
                console.log(err)
              })
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    subChanne() {
      this.$refs.channelRef.validate((valid) => {
        if (valid) {
          const { param } = this
          this.$set(this.param, 'videoId', param.videoIdTemp)
          this.$set(this.param, 'videoNumberId', param.videoNumberIdTemp)
          this.isShowChannel = false
        } else {
          console.log('===')
        }
      })
    },
    openChanne() {
      this.isShowChannel = true
      const { param } = this
      this.$set(this.param, 'videoIdTemp', param.videoId || '')
      this.$set(this.param, 'videoNumberIdTemp', param.videoNumberId || '')
    },
    closeChanne() {
      this.$set(this.param, 'videoIdTemp', '')
      this.$set(this.param, 'videoNumberIdTemp', '')
      this.isShowChannel = false
    },
    closeDrawer() {
      this.isShowDrawer = false
      this.$emit('close')
    },
    getTeachList(page) {
      const venueId = sessionStorage.getItem('venueId')
      teacherList({ param: { venueId, teacherType: '1', isOnJob: '1', status: '1' }})
        .then(res => {
          this.jlList = res.recordList.map(item => {
            item.label = item.teacherName + ' ' + item.phone || '' + ' ' + item.levelName || ''
            return item
          })
        })
      teacherLevelListPost({ param: {}}).then(res => {
        const temp = res.recordList.map(item => {
          item.price = ''
          return item
        })
        this.$set(this.param, 'teacherLevelList', temp)
      })
    },
    getCardList() {
      cardList({})
        .then((res) => {
          if (res.errorCode === '000000') {
            this.vipType = res.recordList.filter(i => i.status === '1')
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 上传图片，开始裁剪
    async addFileChange(file) {
      // 上传，拿到file文件
      this.files = file.raw
      this.$nextTick(() => {
        this.optionImg = URL.createObjectURL(file.raw)
        this.fileinfo = file.raw
        this.dialogCropperVisible = true
      })
    },
    // 裁剪确定按钮
    cropperSubmit(config) {
      // preImg 完整路径  urlPre 不包含域名
      if (config.success) {
        this.$set(this.param, 'courseFullImg', config.showUrl)
        this.$set(this.param, 'courseImg', config.insertUrl)
        this.$refs.ruleForm.clearValidate()
        this.dialogCropperVisible = false
      } else {
        this.$message.error(config.msg || '上传失败')
        this.$refs.form.clearValidate()
        this.dialogCropperVisible = false
      }
    },
    // 裁剪取消
    cropperClose() {
      this.dialogCropperVisible = false
    },
    // 删除已上传图片
    deleteDeviceConfigAddImage() {
      this.$set(this.param, 'courseImg', '')
      this.$set(this.param, 'courseFullImg', '')
    },
    cancelSub() {
      this.isShowDrawer = false
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.leavl {
  width: 400px;
  .header {
    background-color: #f4f7fc;
  }
  .item {
    display: flex;
    .label {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #dfe2e8;
    }
    .value {
      border: 1px solid #dfe2e8;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 6px 20px;
    }
  }
}
.device-uploader {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  border: 1px dashed #ccc;
  border-radius: 8px;
  transition: all 0.3s;
  margin-right: 20px;
  &:hover {
    border-color: $menuActive;
    .uploader-icon {
      color: $menuActive;
    }
  }
  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .file {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      .delete {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        align-items: center;
        justify-content: center;
        .icon {
          color: #fff;
        }
      }
      &:hover {
        .delete {
          display: flex;
        }
      }
    }
  }
  .uploader-icon {
    color: #aaaaaa;
    font-size: 22px;
    transition: all 0.3s;
  }
}
.line-style {
  margin-bottom: 20px;
}
.device-uploaders {
  ::v-deep .el-upload-list__item {
    width: 80px;
    height: 80px;
  }
  ::v-deep .el-upload {
    width: 80px;
    height: 80px;
    line-height: 80px;
  }
}
</style>
<style lang="scss">
.transfer-class .el-transfer-panel {
  width: 300px !important;
}
</style>
